import React, { useEffect, useRef } from 'react'
import './index.scss'

const Loading = () => {

    const timerRef = useRef(null)
    const positionYRef = useRef(0)

    useEffect(() => {
        timerRef.current = setInterval(() => {
            positionYRef.current++;
        }, 600)
        return () => {
            clearInterval(timerRef.current);
            timerRef.current = (null)
        }
    }, [])
    return <div className="component_loading">
        <div
            className="load_img"
            style={{ backgroundPositionY: -(positionYRef.current % 7) * 2.5 + 'rem' }}>
        </div>
        <svg className="load_ellipse" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <ellipse cx="26" cy="10" rx="26" ry="10" style={{ fill: '#ddd', stroke: 'none' }}></ellipse>
        </svg>
    </div>
}

export default Loading